<!DOCTYPE html>
<html>

<head>
  <title>电影大世界</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
    crossorigin="anonymous">
  <link rel='stylesheet' href='/stylesheets/style.css' />
  <link rel="stylesheet" type="" href="/stylesheets/index.css">
</head>

<body>
  <%- include header %>
    <!-- Carousel
    ================================================== -->
    <div id="myCarousel" class="carousel slide" data-ride="carousel" style="margin-top:100px">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
        <li data-target="#myCarousel" data-slide-to="4"></li>
      </ol>
      <div class="carousel-inner" role="listbox">

        <% carousel.forEach(function(item,index){%>
          <div class="item <% if(index===0){%>active<%}%>">
            <img class="first-slide" src="<%= item.images.large %>" alt="<%= item.title %>">
            <div class="container">
              <div class="carousel-caption">
                <h1>
                  <%= item.title %>
                </h1>
                <p>
                  <%= item.year %>
                </p>
              </div>
            </div>
          </div>
          <% }) %>

      </div>
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
    <!-- /.carousel -->


    <!-- Marketing messaging and featurettes
    ================================================== -->
    <!-- Wrap the rest of the page in another container to center all the content. -->

    <div class="container marketing box">

      <!-- Three columns of text below the carousel -->
      <div class="row topbox">
        <h2 style="line-height:40px">
          <img src="/images/051000005706327067BC3D38550115C9.png" alt="" style="padding-bottom:10px">
          TOP250
        </h2>
        <hr>
        <% top250.forEach(function(item,index){%>
          <div class="col-lg-4">
            <img class="img-circle" src="<%= item.images.small %>" alt="Generic placeholder image" width="140" height="140">
            <h2>
              <%= item.title %>
            </h2>
            <p>
              <%= item.year %>
            </p>
            <p><a class="btn btn-default" href="/comment?id=<%= item.id %>" role="button">View details &raquo;</a></p>
          </div>
          <!-- /.col-lg-4 -->
          <% }) %>
      </div>




      <div class="row topbox">
        <h2 style="line-height:40px">
          <img src="/images/051000005706327067BC3D38550115C9.png" alt="" style="padding-bottom:10px">
          即将上映
        </h2>
        <hr>
        <% comingSoon.forEach(function(item,index){%>
          <div class="col-lg-4">
            <img class="img-circle" src="<%= item.images.small %>" alt="Generic placeholder image" width="140" height="140">
            <h2>
              <%= item.title %>
            </h2>
            <p>
              <%= item.year %>
            </p>
            <p><a class="btn btn-default" href="/movie/detail?id=<%= item.id %>" role="button">View details &raquo;</a></p>
          </div>
          <!-- /.col-lg-4 -->
          <% }) %>
      </div>

      <div class="row topbox">
        <h2 style="line-height:40px">
          <img src="/images/051000005706327067BC3D38550115C9.png" alt="" style="padding-bottom:10px">
          正在热映
        </h2>
        <hr>
        <% in_theaters.forEach(function(item,index){%>
          <div class="col-lg-4">
            <img class="img-circle" src="<%= item.images.small %>" alt="Generic placeholder image" width="140" height="140">
            <h2>
              <%= item.title %>
            </h2>
            <p>
              <%= item.year %>
            </p>
            <p><a class="btn btn-default" href="/movie/detail?id=<%= item.id %>" role="button">View details &raquo;</a></p>
          </div>
          <!-- /.col-lg-4 -->
          <% }) %>
      </div>
      
       <div class="row topbox">
        <h2 style="line-height:40px">
          <img src="/images/051000005706327067BC3D38550115C9.png" alt="" style="padding-bottom:10px">
          全网首播
        </h2>
        <hr>
        <% netfirst.forEach(function(item,index){%>
          <div class="col-lg-4">
            <img class="img-circle" src="<%= item.images.small %>" alt="Generic placeholder image" width="140" height="140">
            <h2>
              <%= item.title %>
            </h2>
            <p>
              <%= item.year %>
            </p>
            <p><a class="btn btn-default" href="/movie/detail?id=<%= item.id %>" role="button">View details &raquo;</a></p>
          </div>
          <!-- /.col-lg-4 -->
          <% }) %>
      </div>


       <div class="row topbox">
        <h2 style="line-height:40px">
          <img src="/images/051000005706327067BC3D38550115C9.png" alt="" style="padding-bottom:10px">
          猜你喜欢
        </h2>
        <hr>
        <% guess.forEach(function(item,index){%>
          <div class="col-lg-4">
            <img class="img-circle" src="<%= item.images.small %>" alt="Generic placeholder image" width="140" height="140">
            <h2>
              <%= item.title %>
            </h2>
            <p>
              <%= item.year %>
            </p>
            <p><a class="btn btn-default" href="/movie/detail?id=<%= item.id %>" role="button">View details &raquo;</a></p>
          </div>
          <!-- /.col-lg-4 -->
          <% }) %>
      </div>

      </div>
           
      

      <!-- START THE FEATURETTES -->



      <%- include footer%>

        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
          crossorigin="anonymous"></script>

</body>

</html>